#{extends 'main.html' /}
#{set title:'searchResults.html' /}


<script type="text/javascript">
/*
Calls the method getLocation when document is loaded
*/
$(document).ready(function() {
      getLocation();
});

/*
Gets the current position and forwards it to showPosition
*/
function getLocation() {
	if (navigator.geolocation) {
    	navigator.geolocation.getCurrentPosition(showPosition);
    }
	else{
		$('#searchGeo').html("Geolocation is not supported by this browser.");
	}
}

/*
Stores the current position in the hiddeninput attributes
*/
function showPosition(position) {
	$('#latitude').val(position.coords.latitude);
	$('#longitude').val(position.coords.longitude);
	
}



</script>

#{form @Views.searchResults()}
<div id="searchDivTop">
	<input type="text" id="keywords" class="searchDivTopInput" value="${keywords}" name="keywords" />  <input type="submit" value="search" /> <small><label for="nearby" style="display: inline-block;"><input type="checkbox" name="nearby" id="nearby" value="true" #{if nearby}checked="checked"#{/if} />Search&nbsp;for&nbsp;objects&nbsp;nearby</label></small>
	<input type="hidden" name="nearby" value="false" /><br />(#{if interests}${interests.size()}#{/if}#{else}0#{/else}) objects of Interest. <a href="@{Views.findResults()}"><div id="button">Show similar Objects</div></a>
	<br /><input type="hidden" id="latitude" name="latitude" /> <input type="hidden" id="longitude" name="longitude" /> 


</div>
#{/form}	
<div style="background-color: #333333; color: white; font-weight: bold; padding: 15px;">
	Search results:
</div>
<div id="searchResultsDiv">
<div style="text-align: center; font-weight: bold">
<br /><br /><br />
<img src="@{'public/images/loading.gif'}" /><br /><br />loading</div>
</div>


<script type="text/javascript">
	/*
		This code is loaded when the document is completely loaded.
	*/
	$(document).ready(function(){
		  // sends request to searchResultsJS to load search results 
	      $("#searchResultsDiv").load("@{Views.searchResultsJS()}");
      
	});
</script>
